<template>
    <div class="Cropper" v-show="cropperImg">
        <div class="cropper-container">
            <div class="cropper-el">
                <vue-cropper ref="cropper" :img="cropperImg" :output-size="option.size" :output-type="option.outputType"
                    :info="true" :full="option.full" :fixed="fixed" :fixed-number="fixedNumber" :can-move="option.canMove"
                    :can-move-box="option.canMoveBox" :fixed-box="fixedBox" :original="option.original"
                    :auto-crop="option.autoCrop" :auto-crop-width="optionWidth" :auto-crop-height="optionHeigth"
                    :center-box="option.centerBox" @real-time="realTime" :height="option.height" @img-load="imgLoad"
                    :mode="option.mode" :max-img-size="option.max" :can-scale="option.canScale" :infoTrue="option.infoTrue"
                    :enlarge="option.enlarge"></vue-cropper>
            </div>
            <div class="bottom">
                <a-space>
                    <a-button @click="clearfinish">
                        取消裁剪
                    </a-button>
                    <a-button type="primary" @click="finish">
                        确定裁剪
                    </a-button>
                </a-space>
            </div>
        </div>
    </div>
</template>
   
<script>
import { VueCropper } from 'vue-cropper'
export default {
    name: 'aCropper',
    components: {
        VueCropper
    },
    props: {
        cropperImg: {
            type: String
        },
        optionWidth: {
            type: Number, String,
            // 裁剪框宽
            default: 900
        },
        optionHeigth: {
            type: Number, String,
            // 裁剪高宽
            default: 600
        },
        // 截图框的宽高比例
        fixedNumber: {
            default: () => [1, 1]
        },
        // 固定截图框的大小
        fixedBox: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            previews: {},
            option: {
                img: this.cropperImg,
                size: 1, // 裁剪生成图片的质量
                full: false, // false按原比例裁切图片，不失真
                outputType: 'png', // 裁剪生成图片的格式 默认jpg
                canMove: true, // 上传图片是否可以移动
                canScale: true, // 图片是否允许滚轮播放
                original: true, // 上传图片按照原始比例渲染
                canMoveBox: true, // 截图框是否可以拖动
                autoCrop: true, // 是否默认生成截图框 false
                centerBox: false, // 截图框限制在图片里面
                height: true, //是否按照设备的dpr输出等比例图片
                infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
                enlarge: 1,  //图片根据截图框输出比例倍数
                max: 99999,
                mode: '100%'  //图片默认渲染方式
            },
            show: true,
            fixed: false, // 是否开启截图框宽高固定比例 (默认:true)
            modelSrc: ''
        }
    },
    methods: {
        // 裁剪时触发的方法，用于实时预览
        realTime(data) {
            this.previews = data
        },
        // 图片加载的回调 imgLoad 返回结果success, error
        imgLoad(e) {
            if (e === 'success') {
                console.log('裁剪成功')
            }
        },
        // 确定裁剪
        finish() {
            this.$refs.cropper.getCropBlob((data) => {
                let img = window.URL.createObjectURL(data)
                this.modelSrc = img
                const files = new window.File([data], Date.parse(new Date()) + '.png', { type: data.type })
                files.url = window.URL.createObjectURL(data)
                this.$emit('getCrofile', { file: files })
            })
        },
        clearfinish() {
            this.$emit('clear')
        }
    }
}
</script>
   
<style lang="scss" scoped>
.Cropper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-color: #fff;

    .cropper-el {
        width: 100vw;
        height: 90vh;
        padding: 20px;
    }

    .bottom {
        width: 100%;
        text-align: center;
    }
}
</style>